.k-demo {
  border: 1px solid var(--kui-color-border);
  margin: 10px 0;
  position: relative;
  border-radius: 12px;
  transition: all 0.3s;
  background-color: var(--kui-color-control-10);
  .k-content,
  .k-desc {
    padding: 20px;
    box-sizing: border-box;
  }

  .k-desc {
    margin: 30px 0 0;
    border-top: 1px solid var(--kui-color-border);
    position: relative;

    h4 {
      position: absolute;
      top: -55px;
      font-size: 15px;
      font-weight: 600;
      // background: var(--kui-color-back);
      background-color: var(--kui-color-control-10);
      line-height: 1;
      padding: 5px 10px 5px 0;
    }

    .k-desc-content {
      padding-right: 50px;
      position: relative;

      p {
        margin: 0;
        padding: 0;
      }
    }
  }

  .k-code-actions {
    border-top: 1px dashed var(--kui-color-border);
    text-align: center;
    font-size: 20px;
    display: flex;


    .k-icon {
      cursor: pointer;
      color: #999;
      flex: 1;
      padding: 10px 0;

      &:hover {
        // color: #333;
        background-color: var(--kui-color-gray-90);
      }
    }
  }

  .k-code {
    transition: all .3s ease;
    position: relative;
    .k-code-pre {
      height: 100%;
      min-height: 100%;
      font-size: 0;
      overflow: hidden; // margin: 10px 0;
      transition: height 0.3s ease-in-out;
      line-height: 2;
    }

    code,
    kbd,
    samp {
      font-size: 14px;
      line-height: 2;
    }

    .hljs {
      // background: rgba(241, 241, 241, 0.43) !important;
      height: 100%;
      margin: 0;
      font-size: 14px;
    }

    pre {
      border-top: 1px dashed var(--kui-color-border);
      margin: 0;
      border-radius:0 0 12px 12px;
    }
  }

  .k-code-expan {
    font-size: 24px;
    color: #7d7d7d;
    cursor: pointer;
  }
}

html[theme-mode=dark] .k-demo .k-desc h4{
  background-color: #171717;
}